@import '../mixins.scss';
@import '../variable.scss';

.search {
  padding: .18rem;
  header {
    display: flex;
    align-items: center;
    .search__input {
      flex: 1
    }
    .cancel {
      margin: 0 .18rem 0 .12rem;
      font-size: .16rem;
      line-height: .16rem;
      color: $content-fontcolor;
    }
  }
  .record {
    margin-top: .24rem;
    &__header {
      display: flex;
      color: $content-fontcolor;
      align-items: center;
      &__title {
        flex: 1;
        font-size: .16rem;
        font-weight: bold;
      }
      &__clear {
        font-size: .14rem;
      }
    }
    &__list {
      display: flex;
      flex-wrap: wrap;
      margin-left: -.1rem;
      &__item {
        background: $search-bgColor;
        border-radius: .02rem;
        font-size: .14rem;
        color: $medium-fontColor;
        line-height: .32rem;
        height: .32rem;
        margin: .12rem 0 0 .1rem;
        padding: 0 .1rem;
      }
    }
  }
}

// SearchInput 样式
.search__input {
  background: $search-bgColor;
  border-radius: .16rem;
  height: .32rem;
  line-height: .32rem;
  padding-left: .16rem;
  .icon-search {
    font-size: .16rem;
    color: $bgColor;
  }
  input {
    margin-left: .12rem;
    @include customInput;
    font-size: .14rem;
    color: $content-fontcolor;
    line-height: .16rem;
  }
}
